<template>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	  
	  
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="anlink" label="链接" />
		
		<el-table-column prop="title" label="标题" />
		<el-table-column prop="titles" label="副标题" />
		<el-table-column prop="orders" label="排序" />
		
	
		<el-table-column
	          prop="img"
	          label="图片"
	          width="100"      
	        >
	          <template #default="scope">		  
	              <el-image
	                  style="width: 100px; height: 100px"
	                  :src="ifImgHeader(scope.row.img)"
	                  :preview-src-list="[ifImgHeader(scope.row.img)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column>
			
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index},(x)=>{edites(x)})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
				
				
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="modalStatecode" title="二维码">
		
		<div v-if="modalStatecode" style="width: 80%;margin: 0 auto;text-align: center;" class="qrcode" ref="qrCodeUrl"></div>
	    
	</el-dialog>	
	<el-dialog v-model="modalState" title="标题">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="标题"  prop="title" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="副标题"  prop="titles" :label-width="formLabelWidth">
				<el-input v-model="form.titles" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="排序"  prop="orders" :label-width="formLabelWidth">
				<el-input v-model="form.orders" autocomplete="off"></el-input>
			</el-form-item>
			
			
           <el-form-item label="图片" :label-width="formLabelWidth">
           	<el-upload :key="form.img" class="avatar-uploader" 
			    :action="`${api}/index.php/index/Userinfo/uploadfile`"
           		:show-file-list="false"
				:headers="{tokenid: 'nfxcx20220421mao2ctH4NHhSbkZnNPTFLRgtv'}"
				:data="jm()"
				:on-success="(file)=>{editImgsProps({file,key:'img'})} ">
           		<img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
           		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
           	</el-upload>
				<!-- <span>
			参考尺寸:750*1050
			</span> -->
           </el-form-item>
		   <el-form-item label="链接"  :label-width="formLabelWidth">	   	
		          <el-input v-model="form.anlink" autocomplete="off"></el-input>
		   </el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
				
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="modalStatewins" title="获奖人员">
		
		<div v-if="viewarr.length>0" v-for="(item,index) in viewarr" style="display: flex;">
		<div style="margin:10px 30px 0 0;">
			<span>名称</span> <span>{{item.hdqtxmname}}</span>
		</div>
		<div style="margin:10px 30px 0 0;"><span>加排序</span> <span>{{item.hdorders}}</span></div>
		<div style="margin:10px 30px 0 0;"><span>手机号码</span> <span>{{item.numbers}}</span></div>
		</div>
	</el-dialog>
	<el-dialog v-model="modalStatewin" title="获奖人员">
		<!-- <el-button type="primary" @click="addhj" style="margin-bottom: 30px;">新增获奖人员</el-button> -->
		<el-form  :inline="true" class="demo-form-inline">
		    <el-form-item label="名称">
		      <el-input   v-model="hdqtxmname" />
		    </el-form-item>
		    <el-form-item label="加排序">
		      <el-input  v-model="hdorders"/>
		    </el-form-item>
		    <el-form-item label="手机号码">
		      <el-input  v-model="numbers"/>
		    </el-form-item>
		  </el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalStatewin = false">取消</el-button>
				<el-button type="primary" @click="submitwind('rule')">确定</el-button>			
			</span>
		</template>
		  
	</el-dialog>
</template>

<script lang="ts">

			

	import QRCode from 'qrcodejs2'
	import moment from "moment"
	import editorWang from '../components/wangEnduit'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components:{
			editorWang
		},
		watch:{
			times(){
				this.form.starttime=this.times[0];
				this.form.endtime=this.times[1];
			},
		},
		data() {
			return {
				viewarr:[],
				modalStatewins:false,
				hdqtxmname:"",//     名称
				hdorders :"",//   加排序
				numbers :"",//  手机
				modalStatewin:false,
				qrcode:null,
				modalStatecode:false,
				vtimes:['',''],
				formLabelWidth: '120px',
				times:"",
				form: {
					title:"",
					img:"",
					anlink:"",
					orders:"",
					titles:"",
					
				},
				tableData:[],
				rules: {
				        
						
						
				},
				pid: []
			}
		},
		mounted() {
			this.getData();		
		},
		methods: {
			
			
			edites(data){
				console.log(data.row)
				data.row.is_show=data.row.is_show+'';
				delete data.row.ewmid;
				var data =JSON.parse(JSON.stringify(data.row))
				this.times=[data.starttime,data.endtime];	
			},
			
           
			getData() {
				this.$http.get("/index.php/index/Goods/nftwedit").then(data => {
					
					this.tableData=data;

				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					
					this.$http.post(this.id ? '/index.php/index/Goods/nftwedit' : "/index.php/index/Goods/nftwadd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/Goods/nftwdel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
